<template>
  <div>
    <div class="box1">
      <div class="tabs">
        <span :class="[tabIndex === 0 ? 'on' : '']" @click="tabClick(0)"
          ><span>待使用</span></span
        >
        <span :class="[tabIndex === 1 ? 'on' : '']" @click="tabClick(1)"
          ><span>已使用</span></span
        >
        <span :class="[tabIndex === -1 ? 'on' : '']" @click="tabClick(-1)"
          ><span>已过期</span></span
        >
      </div>

      <van-list
        v-model="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="onLoad"
        style="margin-top: 3rem"
      >
        <div
          class="van-coupon"
          v-for="(item, index) in data"
          :key="index"
          @click="detail(item)"
        >
          <div class="van-coupon__content">
            <div class="van-coupon__head">
              <h2 class="van-coupon__amount">
                {{ item.money }}<span>元</span>
              </h2>
              <p class="van-coupon__condition">
                {{ item.desc }}
              </p>
            </div>
            <div class="van-coupon__body">
              <p class="van-coupon__name">{{ item.title }}</p>
              <p class="van-coupon__valid">
                {{ item.startime }} -{{ item.endtime }}
              </p>
              <div  v-if="tabIndex === 0 "
                role="checkbox"
                tabindex="0"
                aria-checked="false"
                class="van-checkbox van-coupon__corner"
                size="18"
              >
                 <van-button  class="selectBut">查看</van-button>
              </div>
            </div>
          </div>
        </div>
      </van-list>

      <van-empty v-if="data.length == 0" description="暂无数据" />
    </div>

    <van-popup v-model="showQRCode" class="popupQRCode">
      <!-- <div class="title">条形码：</div>
        <div>
          <barcode   v-if="showQRCode&&usersDetail.number"  :value="usersDetail.number"   :options="{ textPosition:'top',background:'rgba(255,255,255,.0)'}"> 条形码显示失败时的内容 </barcode>
        </div> -->

      <div class="title">二维码：</div>
       <div class="erweima">
            <div class="floatDiv"></div>
        <vue-qr
          v-if="showQRCode"
          :text="downloadData.url"
          qid="testid"
        ></vue-qr>
      </div>
    </van-popup>
  </div>
</template>
<script>
import {hideWxMenu } from '@/assets/js/tools'
import vueQr from "vue-qr";

let t;
export default {
  name: "home",
  components: {
    vueQr,
    // 'barcode':VueBarcode
  },
  data() {
    return {
      showQRCode: false,
      tabIndex: 0,
      count: 0,
      data: [],
      params: {
        page: 0,
        limit: 10,
        type: 0,
      },
      chosenCoupon: -1,

      loading: false,
      finished: false,
      openid: "",

      downloadData: {
        url: "",
        icon: "",
      },
    };
  },
  methods: {
    detail(item) {
      if (t.tabIndex === 0) {
        t.showQRCode = true;

        t.downloadData.url = JSON.stringify({
          type: 2,
          number: item.number,
          openid: t.openid,
        });
      }
    },
    tabClick(num) {
      this.tabIndex = num;
      t.params.type = num;
      t.params.page = 1;
      t.getList();
    },
    onChange(...item) {
      console.log("item1", item);
      this.chosenCoupon = item[0];
    },
    onExchange(...item) {
      console.log("item2", item);
    },
    onLoad() {
      let t = this;
      this.params.page++;

      console.log("123");
      this.getList();
    },
    getList() {
      t.params.openid = t.openid;
      t["$API"]["userUserCoupons"](t.params).then((res) => {
        this.loading = false;
        if (res.code == 200) {
          t.count = res.data.count;

          if (t.params.page == 1) {
            t.data = [];
            t.data = res.data.data;
          } else {
            t.data = t.data.concat(res.data.data);
          }

          if (t.data.length >= t.count) {
            this.finished = true;
          }
        } else {
          t.data = [];
          this.finished = true;
        }
      });
    },
  },
  mounted() {
    t = this;
    t.openid = localStorage.getItem("openid");
    
     hideWxMenu()
  },
};
</script>

<style lang="less" scoped>
/deep/ .van-tabs__wrap {
  display: none;
}
/deep/ .van-list__finished-text {
  display: none;
}
.buts {
  display: flex;
  position: fixed;
  bottom: 1rem;
  width: 100%;
  justify-content: center;
  > button {
    width: 90%;
    background-color: #ff4600;
    color: white;
  }
}
/deep/ .van-coupon__head {
  max-width: 8rem;
  width: 8rem;
}
/deep/ .van-coupon {
  margin-top: 1rem;
}
.tabs {
  position: fixed;
  top: 0;
  width: 100%;
  display: flex;

  background: white;
  z-index: 2;
  > .on {
    color: #376157;
    > span {
      border-bottom: 2px solid #376157;
      padding-bottom: 0.5rem;
    }
  }
  > span {
    display: bold;
    flex: 1;
    text-align: center;
    line-height: 2.5rem;
  }
  > span:nth-child(2) {
    // border-left: 1px solid #c7c7c7;
    // border-right: 1px solid #c7c7c7;
  }
}
.popupQRCode {
  > div {
    text-align: center;
  }

  .title {
    text-align: left;
    position: relative;
    padding: 0.5rem 0.5rem 0.5rem 1rem;
  }
  .title::before {
    content: "";
    width: 0.3rem;
    background-color: white;
    height: 0.9rem;
    position: absolute;
    top: 50%;
    left: 0.5rem;

    transform: translateY(-50%);
  }

  > .title:nth-child(1) {
    background: #376157;
    background-image: linear-gradient(45deg, #376157, #00b894);
    color: white;
    // border-top-right-radius: .5rem;
    // border-top-left-radius: .5rem;
  }
  > .title:nth-child(3) {
    background: #34495e;
    color: white;
    margin-top: 1rem;
  }
}
.selectBut{
   background: #376157;
    background-image: linear-gradient(45deg, #376157, #00b894);
    color: white;
        height: 2rem;
    border-radius: .2rem;
}
/deep/ .van-coupon__corner{
  right: .2rem;
}
.erweima{
  position: relative;
  .floatDiv{
    width: 100%;
    height: 100%;
    background: rgba(red, green, blue, 0);
    position: absolute;
    z-index: 123;
  }
}
</style>
